<template>
  <img id="img" />
</template>
<script>
import {reactive} from "vue";

export default {
  name: "authImg",
  props: ['authSrc'],
  setup(props) {
    const headers = window.sessionStorage.getItem('satoken')
    const authSrc = reactive(props.authSrc)
    Object.defineProperty(Image.prototype, "authsrc", {
      writable: true,
      enumerable: true,
      configurable: true,
    });
    let request = new XMLHttpRequest();
    request.responseType = "blob";
    request.open("get", authSrc, true);
    //这里带上请求头
    request.setRequestHeader("Authorization",headers);
    request.onreadystatechange = (e) => {
      if (request.readyState === XMLHttpRequest.DONE && (request.status === 200 || request.code === 200)) {
        console.log(document.getElementById('img'))
        document.getElementById('img').src = URL.createObjectURL(request.response);
        document.getElementById('img').onload = () => {
          URL.revokeObjectURL(document.getElementById('img'));
        };
      }
    };
    request.send(null);
  }
};
</script>
<style scoped>
</style>
